<script setup>
import {ref, inject} from "vue";
import {
  PartlySunnyOutline as SunIcon,
  CloudyNightOutline as DarkIcon
} from "@vicons/ionicons5"
import {useCounterStore} from "@/stores/counter.js";
const { dark } = inject('dark')
let darkValSet = ref(true)
function darkChangeClick(changeVal) {
  if(changeVal === 'wtb'){
    dark(true)
    // useCounterStore().increment(true)
    // console.log(useCounterStore().count)
    darkValSet.value = false
  }else {
    dark()
    // useCounterStore().increment(false)
    // console.log(useCounterStore().count)
    darkValSet.value =true
  }
}

</script>

<template>
<!--  白天转夜晚-->
  <n-button v-if="darkValSet" text @click="darkChangeClick('wtb')">
    <n-icon :component="DarkIcon" size="16"/>深色
  </n-button>
<!--    夜晚转白天-->
  <n-button v-else text @click="darkChangeClick('btw')">
    <n-icon :component="SunIcon" size="16"/>浅色
  </n-button>
</template>

<style scoped>

</style>